<template>
  <div class="message-frame">
    <div class="left-wrapper">
      <label><input type="checkbox" v-model="message.enabled">{{ message.name }}</label>
    </div>
    <hr/>
    <div class="textarea-wrapper">
      <textarea v-model="message.value"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageFrame',
  props: {
    message: {
      type: [Object],
      required: true
    }
  }
}
</script>

<style scoped>
.message-frame {
  display: flex;
}

.left-wrapper {
  min-width: 60px;
  font-size: 0.9em;
}

.left-wrapper input {
  height: 1.2em;
  width: 1.2em;
}

.textarea-wrapper {
  flex: 1;
  padding-right: 8px;
}

.textarea-wrapper textarea {
  width: 100%;
  resize: vertical; /*只能垂直拉伸*/
  font-size: 0.8em;
  height: 16px;
}
</style>
